<template>
  <el-drawer :visible.sync="drawer" direction="rtl" size="50%" :with-header="false" :width="700">
    <div class="drawer_box">
      <div class="drawer_title">
        <div class="drawer_t">
          <div class="drawer_t_l">
            <img class="drawer_t_l_img" src="/static/skin/herodoo/main/platform/home/img/piliangoumai.png" alt="" />
            {{ isEdit == "CREATE" ? "新建" : "编辑" }}主题
          </div>
          <img class="drawer_t_r" src="/static/skin/herodoo/main/platform/home/img/guanbi.png" alt=""
            @click="drawer = false" />
        </div>
      </div>
      <div class="drawer_content">
        <div class="content-box">
          <div class="label">主题名称：</div>
          <div class="desc">
            <el-input v-model="form.title" placeholder="主题名称" :disabled="isEdit == 'look' ? true : false"></el-input>
          </div>
        </div>
        <!-- <div class="content-box">
          <div class="label">城市活动主题中文繁体名称：</div>
          <div class="desc">
            <el-input
              v-model="form.cn"
              placeholder="城市活动主题中文繁体名称"
              :disabled="isEdit == 'look' ? true : false"
            ></el-input>
          </div>
        </div>
        <div class="content-box">
          <div class="label">城市活动主题文英文名称：</div>
          <div class="desc">
            <el-input
              v-model="form.en"
              placeholder="城市活动主题中文英文名称"
              :disabled="isEdit == 'look' ? true : false"
            ></el-input>
          </div>
        </div>
        <div class="content-box">
          <div class="label">城市活动主题日文名称：</div>
          <div class="desc">
            <el-input
              v-model="form.jn"
              placeholder="城市活动主题中文日文名称"
              :disabled="isEdit == 'look' ? true : false"
            ></el-input>
          </div>
        </div>
        <div class="content-box">
          <div class="label">城市活动主题韩文名称：</div>
          <div class="desc">
            <el-input
              v-model="form.kn"
              placeholder="城市活动主题中文韩文名称"
              :disabled="isEdit == 'look' ? true : false"
            ></el-input>
          </div>
        </div> -->
        <div class="content-box">
          <div class="label">主题主图:</div>
          <div class="desc">
            <div class="tips">
              附图可上传1张图片，图片不超过512KB，仅支持jpg、png格式
            </div>
            <imgUplode :list="form.fileList" @imgList="getImgsUrl" :octopus="octopus" :min="1">
            </imgUplode>
          </div>
        </div>

        <div class="content-box">
          <div class="label">主题时间:</div>
          <div class="desc">
            <el-date-picker v-model="form.starttime" type="datetime" placeholder="选择投放开始日期时间">
            </el-date-picker>
            <span style="padding: 0 10px;">至</span>
            <el-date-picker v-model="form.endtime" type="datetime" placeholder="选择投放结束日期时间">
            </el-date-picker>
          </div>
        </div>

        <div class="content-box">
          <div class="label">主题详情:</div>
          <div class="desc">
            <quill ref="quill" v-if="drawer" :octopus="octopus" @quillContent="getQuillContent"
              :desc="form.deltedContent" :isEdit="!['CREATE', 'UPDATE'].includes(isEdit)" :key="getQuillContent">
            </quill>
          </div>
        </div>
        <div class="content-box">
          <div class="label">是否置顶</div>
          <div class="desc">
            <el-radio v-for="item in isTop" v-model="form.isTop" :key="item.id" :label="item.id">{{ item.label
              }}</el-radio>
          </div>
        </div>
      </div>
      <div>
        <div class="button_list">
          <!-- <button @click="save(2)">发布</button> -->
          <button style="background-color: #1E1B19;" @click="save(0)"> 暂存 </button>
          <button @click="save(1)">发布</button>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import imgUplode from "@/components/Components/imgUpdate.vue";
import quill from "@/components/Components/quillEditor.vue";
export default {
  name: "cat_dialog",
  props: {
    messageList: {
      type: Object,
      default: {}
    }
  },
  components: {
    imgUplode,
    quill
  },
  data() {
    return {
      octopus: this.$parent.octopus,
      drawer: false,
      isTop: [
        {
          id: 0,
          label: "否"
        },
        {
          id: 1,
          label: "是"
        }
      ],
      form: {
        title: "",
        sort: "0",
        fileList: [],
        deltedContent: "",
        source: "",
        isTop: 0,
        status: 1,
        starttime: "",
        endtime: "",
        zn: "",
        cn: "",
        zn: "",
        jn: "",
        kn: ""
      },
      rules: {
        title: { required: true, message: "请输入城市活动主题标题" },
        source: { required: false, message: "请输入城市活动主题来源" },
        fileList: { required: true, message: "请上传城市活动主题主图" },
        starttime: { required: true, message: "请选择的开始时间" },
        endtime: { required: true, message: "请选择的结束时间" },
        deltedContent: { required: true, message: "请输入城市活动主题详情" }
      },
      isEdit: "look"
    };
  },
  created() { },
  computed: {},
  watch: {},
  methods: {
    drawerOpen(list = null, type = "look") {
      this.drawer = true;
      this.isEdit = type;

      if (list) {
        this.form.title = list.row.Name;
        this.form.fileList =
          list.row.PosterPath && JSON.parse(list.row.PosterPath);
        this.form.deltedContent = list.row.Description;
        this.form.isTop = list.row.IsTopic == "是" ? 1 : 0;
        this.form.starttime = list.row.StartTime;
        this.form.endtime = list.row.EndTime;
        this.form.ID = list.row.ID;
      } else {
        // this.form.title = "";
        // this.form.fileList = [];
        // this.form.deltedContent = "";
        // this.form.isTop = 0;
        // this.form.ID = "";
      }
    },
    save(status) {
      if (!this.octopus.tools.verify(this.form, this.rules)) {
        return;
      }
      this.form.starttime = this.format(this.form.starttime);
      this.form.endtime = this.format(this.form.endtime);
      let txt = status ? '发布' : '暂存'
      this.$confirm(`确定${txt}这个主题吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        // type: 'warning'
        center: true
      })
        .then(res => {
          this.update_api_1302(status);
        })
        .catch(() => {
          console.log("取消了");
        });
    },
    // 格式化时间
    format(time, format = "yyyy-mm-dd hh:ii:ss") {
      let t = "";
      let f = "";
      if (Object.prototype.toString.call(time) === "[object Object]") {
        t = time.time;
        f = time.format || "yyyy-mm-dd hh:ii:ss";
      } else {
        t = time;
        f = format;
      }
      const d = new Date(t);
      const formatObj = {
        y: d.getFullYear(),
        m: d.getMonth() + 1,
        d: d.getDate(),
        h: d.getHours(),
        i: d.getMinutes(),
        s: d.getSeconds(),
        z: d.getMilliseconds()
      };
      return f.toLowerCase().replace(/([ymdhisaz])+/g, (result, key) => {
        const value = formatObj[key].toString();
        if (key === "y") {
          return value.substr(
            value.length - result.length > 0 && value.length - result.length
          );
        }
        return value.padStart(result.length, "0");
      });
    },
    getImgsUrl(fileList) {
      this.$set(this.form.fileList, 0, fileList[0]);
    },
    getQuillContent(e) {
      this.form.deltedContent = e;
    },
    update_api_1302(status = 1) {
      let cellData = [
        { name: "Name", defaultValue: this.form.title }, // 新闻标题
        {
          name: "PosterPath",
          defaultValue: JSON.stringify(this.form.fileList)
        }, // PosterPath
        { name: "Description", defaultValue: this.form.deltedContent }, // Description
        { name: "IsTopic", defaultValue: this.form.isTop }, // 是否置顶
        { name: "StartTime", defaultValue: this.form.starttime }, // StartTime
        { name: "EndTime", defaultValue: this.form.endtime }, // EndTime
        { name: "Status", defaultValue: status },	// Status
      ];

      if (this.isEdit == "CREATE") {
        // 创建时间
        cellData.push({
          name: "CreateTime",
          defaultValue:
            new Date().toJSON().substring(0, 10) +
            " " +
            new Date().toTimeString().substring(0, 8)
        });
        // 创建人
        cellData.push({
          name: "CreateUserID",
          defaultValue: this.octopus.passport.id
        });
      }
      if (this.isEdit == "UPDATE") {
        // 维护时间
        cellData.push({
          name: "UpdateTime",
          defaultValue:
            new Date().toJSON().substring(0, 10) +
            " " +
            new Date().toTimeString().substring(0, 8)
        });
        // 维护人
        cellData.push({
          name: "UpdateUserID",
          defaultValue: this.octopus.passport.id
        });
      }

      this.octopus.request.api.post(
        "/Octopus/Engine/Item",
        {
          id: 1302,
          type: this.isEdit,
          value: this.isEdit == "CREATE" ? "" : this.form.ID,
          cellData: cellData,
          paramData: {}
        },
        data => {
          if (data.status.code == 200) {
            this.drawer = false;
            for (let [k, v] of Object.entries(this.form)) {
              // console.log(typeof v, v, k);
              typeof v == "string" ? (this.form[k] = "") : (this.form[k] = []);
            }
            this.octopus.tips.success("操作成功。");
            this.$emit("reload");
          } else {
            this.octopus.tips.error(data);
          }
        }
      );
    }
  }
};
</script>
<style scoped>
.button_list {
  margin-top: 1rem;
  display: flex;
  justify-content: end;
  position: absolute;
  background-color: #ffff;
  bottom: 1rem;
  width: calc(100% - 7rem);
}

.button_list button {
  border: none;
  height: 4rem;
  width: 12rem;
  border-radius: 1rem;
  margin-left: 1rem;
  color: #ffff;
  background-color: #f78c53;
  cursor: pointer;
}

.tips {
  margin-bottom: 20px;
}

.drawer_box {
  padding: 3rem 0.8rem 3rem 0;
  height: calc(100% - 5rem);
  display: flex;
  flex-direction: column;
}

.drawer_title {
  box-shadow: 0px 5px 5px rgb(230 228 228 / 30%);
  padding-bottom: 1rem;
  font-size: 1.6rem;
}

.drawer_t {
  padding: 0 2.8rem;
  display: flex;
  justify-content: space-between;
}

.drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
}

.drawer_t_l_img {
  width: 2.8rem;
  margin-right: 1rem;
}

.drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.button_box {
  margin-top: 1rem;
  padding: 0 3rem;
  display: flex;
}

.drawer_content {
  overflow-y: auto;
  margin-top: 1.5rem;
  height: calc(100vh - 11rem);
  padding: 0 3rem;
  width: 100%;
  padding-bottom: 1rem;
}

.drawer_content .title {
  font-size: 1.8rem;
  font-weight: bold;
}

.drawer_content .driver-title {
  margin-top: 1em;
}

.content-box {
  display: flex;
  align-items: flex-start;
  margin: 2rem 0 2rem 2em;
}

.mt-10 {
  margin-top: 10rem;
}

.content-box .label {
  width: 25%;
  font-size: 1.6rem;
}

.content-box .label .label-bold {
  font-size: 1.8rem;
  font-weight: bold;
}

.content-box .desc {
  flex: 1;
  font-size: 1.6rem;
  padding-left: 2px;
}

>>>.el-radio__input.is-checked+.el-radio__label {
  color: #f87338;
}

>>>.el-radio__input.is-checked .el-radio__inner {
  border-color: #f87338;
  background: #f87338;
}
</style>
